import React, { Component } from 'react'
import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
import FilterMore from '../FilterMore'
import './index.sass'
const titleSelectedStatus = {
  area: false,
  mode: false,
  price: false,
  more: false
}
// FilterPicker 和 FilterMore 组件的选中值
const selectedValues = {
  area: ['area', 'null'],
  mode: ['null'],
  price: ['null'],
  more: []
}
export default class Filter extends Component {
  state = {
    titleSelectedStatus,
    // 控制 FilterPicker 或 FilterMore 组件的展示或隐藏
    openType: '',
    // 所有筛选条件数据
    filtersData: {
      // FilterMore
      roomType: [],
      oriented: [],
      floor: [],
      characteristic: [],
      // FilterPicker
      area: {},
      subway: {},
      rentType: [],
      price: []
    },
    // 筛选条件的选中值
    selectedValues
  }
  componentDidMount() {
    // 获取到body
    this.htmlBody = document.body

    this.getFiltersData()
  }
  // 获取刚进入页面数据
  async getFiltersData() {
    // 获取当前定位城市id
    const { value } = JSON.parse(localStorage.getItem('fh_city'))
    const res = await this.$API.get(`/houses/condition?id=${value}`)

    this.setState({
      filtersData: res
    })
  }

  //点击标题菜单实现高亮
  onTitleClick = type => {
    // 给 body 添加样式
    this.htmlBody.className = 'body-fixed'
    const { titleSelectedStatus, selectedValues } = this.state
    // 创建新的标题选中状态对象
    const newTitleSelectedStatus = { ...titleSelectedStatus }
    Object.keys(titleSelectedStatus).forEach(key => {
      // key 表示数组中的每一项，此处，就是每个标题的 type 值。
      if (key === type) {
        // 当前标题
        newTitleSelectedStatus[type] = true
        return
      }
      // 其他标题：
      const selectedVal = selectedValues[key]
      if (key === 'area' && (selectedVal.length !== 2 || selectedVal[0] !== 'area')) {
        console.log(1);
        newTitleSelectedStatus[key] = true
      } else if ((key === 'mode' || key === 'price') && selectedVal[0] !== 'null') {
        newTitleSelectedStatus[key] = true
      } else if (key === 'more' && selectedVal.length !== 0) {
        newTitleSelectedStatus[key] = true
      } else {
        newTitleSelectedStatus[key] = false
      }
    })
    this.setState({
      // 展示对话框
      openType: type,
      // 使用新的标题选中状态对象来更新
      titleSelectedStatus: newTitleSelectedStatus
    })
  }
  isTitleHighLight(type, value = '') {
    const { titleSelectedStatus, selectedValues } = this.state
    const newTitleSelectedStatus = { ...titleSelectedStatus }
    let selectedVal = null
    if (value === '') {
      selectedVal = selectedValues[type]
    } else {
      selectedVal = value
    }
    if (type === 'area' && (selectedVal.length !== 2 || selectedVal[0] !== 'area')) {
      console.log(1);
      newTitleSelectedStatus[type] = true
    } else if ((type === 'mode' || type === 'price') && selectedVal[0] !== 'null') {
      newTitleSelectedStatus[type] = true
    } else if (type === 'more' && selectedVal.length !== 0) {
      newTitleSelectedStatus[type] = true
    } else {
      newTitleSelectedStatus[type] = false
    }
    this.setState({
      titleSelectedStatus: newTitleSelectedStatus
    })
  }
  onSave = (type, value) => {
    this.htmlBody.className = ''
    this.isTitleHighLight(type, value)
    const newSelectedValues = {
      ...this.state.selectedValues,
      // 只更新当前 type 对应的选中值
      [type]: value
    }
    // 隐藏对话框
    this.setState({
      openType: '',
      selectedValues: newSelectedValues
    })
    const { area, mode, price, more } = newSelectedValues
    // 筛选条件数据
    const filters = {}

    // 区域
    const areaKey = area[0]
    let areaValue = 'null'
    if (area.length === 3) {
      areaValue = area[2] !== 'null' ? area[2] : area[1]
    }
    filters[areaKey] = areaValue

    // 方式和租金
    filters.mode = mode[0]
    filters.price = price[0]

    // 更多筛选条件 more
    filters.more = more.join(',')


    // 调用父组件中的方法，来将筛选数据传递给父组件
    this.props.onFilter(filters)

  }
  onCancel = type => {
    this.htmlBody.className = ''
    this.isTitleHighLight(type)
    this.setState({
      openType: '',
    })
  }
  // 渲染蒙版
  renderMask() {
    const { openType } = this.state
    // 遮罩层是否隐藏
    if (openType === '' || openType === 'more') {
      return null
    }
    return (
      <div className="mask mask_transition" onClick={() => this.onCancel(openType)}
        style={{ zIndex: openType === 'more' ? '3' : '2' }}>
      </div>
    )
  }
  //渲染选择框
  renderFilterPicker() {
    const {
      openType,
      filtersData: { area, subway, rentType, price },
      selectedValues
    } = this.state
    if (openType !== 'area' && openType !== 'mode' && openType !== 'price') {
      return null
    }
    let data = []
    let cols = 3
    let defaultValue = selectedValues[openType]
    switch (openType) {
      case 'area':
        // 获取到区域数据
        data = [area, subway]
        cols = 3
        break
      case 'mode':
        data = rentType
        cols = 1
        break
      case 'price':
        data = price
        cols = 1
        break
      default:
        break
    }

    return (
      <FilterPicker
        key={openType}
        onCancel={this.onCancel}
        onSave={this.onSave}
        data={data}
        cols={cols}
        type={openType}
        defaultValue={defaultValue}
      />
    )
  }
  renderFilterMore() {
    const { openType,
      selectedValues,
      filtersData: {
        characteristic,
        floor,
        oriented,
        roomType
      } } = this.state;

    const data = { characteristic, floor, oriented, roomType };
    const defaultValues = selectedValues.more;
    if (openType === 'more') {
      return <FilterMore
        data={data}
        defaultValues={defaultValues}
        type={openType}
        onCancel={this.onCancel}
        onSave={this.onSave}
      />
    } else {
      return null
    }
  }
  render() {
    const { titleSelectedStatus } = this.state
    return (
      <div className="filter">
        {/* 前三个菜单的遮罩层 */}
        {this.renderMask()}

        <div className="filter-box">
          {/* 标题栏 */}
          <FilterTitle titleSelectedStatus={titleSelectedStatus} onClick={this.onTitleClick} />
          {/* 前三个菜单对应的内容： */}
          {this.renderFilterPicker()}
          {/* 最后一个菜单对应的内容： */}
          {this.renderFilterMore()}
        </div>
      </div>
    )
  }
}
